<template>
  <el-aside :width="sideWith + 'px'" style="background-color: rgb(238, 241, 246);">
    <el-menu
        :default-openeds="['1', '2', '3', '4', '5', '6', '7']"
        style="min-height: 100%; overflow-x: hidden"
        background-color="rgb(48, 65, 86)"
        text-color="#fff"
        active-text-color="#ffd04b"
        :collapse-transition="false"
        class="el-menu-v"
        :collapse="isCollapse"
    >
      <div style="width: 160px; line-height: 60px; text-align: center">
        <img src="../assets/logo.png" style="width: 20px; position: relative; margin-right: 5px; top: 5px" />
        <b style="color: white" v-show="logTextShow">后台管理系统</b>
      </div>

      <!-- 模块1：个人信息展示 -->
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-user"></i>
          <span slot="title">个人信息展示</span>
        </template>
        <el-menu-item index="1-1" @click="goToStuInfo">学生个人信息</el-menu-item>
      </el-submenu>

      <!-- 模块2：讨论社区 -->
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-chat"></i>
          <span slot="title">讨论社区</span>
        </template>
        <el-menu-item index="2-1" @click="goToPostStu">讨论社区</el-menu-item>
      </el-submenu>

      <!-- 模块3：我的作业 -->
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-files"></i>
          <span slot="title">我的作业</span>
        </template>
        <el-menu-item index="3-1" @click="goToMyHomework">我的作业</el-menu-item>
      </el-submenu>

      <!-- 模块4：我的考试 -->
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-pie-chart"></i>
          <span slot="title">我的考试</span>
        </template>
        <el-menu-item index="4-1" @click="goToMyExam">我的考试</el-menu-item>
      </el-submenu>

      <!-- 模块5：我的练习 -->
      <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-refresh"></i>
          <span slot="title">我的练习</span>
        </template>
        <el-menu-item index="5-1" @click="goToMyPractice">我的练习</el-menu-item>
      </el-submenu>

      <!-- 模块6：按题量和章节布置练习 -->
      <el-submenu index="6">
        <template slot="title">
          <i class="el-icon-book"></i>
          <span slot="title">按题量和章节布置练习</span>
        </template>
        <el-menu-item index="6-1" @click="goToAssignPractice">按题量和章节布置练习</el-menu-item>
      </el-submenu>

      <!-- 模块7：SQL练习 -->
      <el-submenu index="7">
        <template slot="title">
          <i class="el-icon-sql"></i>
          <span slot="title">SQL练习</span>
        </template>
        <el-menu-item index="7-1" @click="goToSQLPractice">SQL练习</el-menu-item>
      </el-submenu>

      <el-submenu index="8">
        <template slot="title">
          <i class="el-icon-book"></i>
          <span slot="title">布置测试</span>
        </template>
        <el-menu-item index="8-1" @click="goToAssignTest">布置测试</el-menu-item>
      </el-submenu>

      <el-submenu index="9">
        <template slot="title">
          <i class="el-icon-book"></i>
          <span slot="title">我的测试</span>
        </template>
        <el-menu-item index="8-1" @click="goToMyTest">我的测试</el-menu-item>
      </el-submenu>

    </el-menu>
  </el-aside>
</template>

<script>
export default {
  name: "Sidebar",
  data() {
    return {
      isCollapse: false,
      collapseBtnClass: "el-icon-s-fold",
      sideWith: 200,
      logTextShow: true,
    };
  },
  methods: {
    goToStuInfo() {
      this.$router.push({ path: "/Stu_info" }); // 跳转到学生个人信息页面
    },
    goToPostStu() {
      this.$router.push({ path: "/post/post_Stu" }); // 跳转到讨论社区页面
    },
    goToMyHomework() {
      this.$router.push({ path: "/StuHomework/MyHomework" }); // 跳转到我的作业页面
    },
    goToMyExam() {
      this.$router.push({ path: "/StuHomework/MyExam" }); // 跳转到期末模拟考试页面
    },
    goToMyPractice() {
      this.$router.push({ path: "/practice/MyPractice" }); // 跳转到自定义随机抽题练习页面
    },
    goToAssignPractice() {
      this.$router.push({ path: "/practice/AssignPractice" }); // 跳转到布置练习页面
    },
    goToMyTest() {
      this.$router.push({ path: "/practice/MyTest" }); // 跳转到自定义随机抽题练习页面
    },
    goToAssignTest() {
      this.$router.push({ path: "/practice/AssignTest" }); // 跳转到布置练习页面
    },
    goToSQLPractice() {
      this.$router.push({ path: "/sql" }); // 跳转到SQL练习页面
    },
  },
};
</script>

<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>
